<template>
  <swiper class="banner" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(val, key) in imglist" :key = "key">
      <img class="img" :src="val"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination">
    </div>
  </swiper>
</template>

<script>
    export default {
        name: "LBT",
      data() {
        return {
          showBanner:true,
          paginationList: [1, 2, 3, 4, 5],
          banner: [],
          imglist: [
            require('../../../assets/tlbt1.jpg'),
            require('../../../assets/tlbt2.jpg'),
            require('../../../assets/tlbt3.jpg'),
            require('../../../assets/tlbt4.jpg'),
            require('../../../assets/tlbt5.png')
          ],
          swiperOption: {
            loop:true,
            autoplay: {
              delay:1000,
              // 用户操作之后是否禁止
              disableOnInteraction:false,
            },
            preventLinksPropagation: false,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
              type: 'bullets',
            }
          },
        }
      },
      methods:{
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      mounted() {
        this.$http.get('/lbtList')
          .then((res) => {
            this.banner = res.data.lbtList.img;
          })
          .catch((err) => {
            console.log(err);
          });
          let pointer =this.swiper.pagination.bullets;
        for (let i = 0; i < pointer.length; i++) {
          pointer[i].style.width = '15px';
          pointer[i].style.height = '3px';
        }
        this.swiper.slideTo(0, 500, false);
      },
    }
</script>

<style scoped>
  .banner{
    width: 100%;
    height: 100%;
  }
  swiper-slide{
    width: 690px;
    height: 250px;
  }
  .img{
    width: 100vw;
    height: 100%;
  }
</style>
